<template>
    <el-container>
        <el-container>

            <el-col :span="4" class="colme">

                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-col>

            <el-main>
                <h1>xxx今日待问诊患者</h1>
                <el-row>
                    <el-col :span="24"><div class="grid-content bg-purple-dark">医生/问诊中</div></el-col>
                </el-row>

                <div>
                    <el-button type="primary" plain icon="el-icon-user-solid" @click="dialog1=true"
                        style="float: left;">新增问诊
                    </el-button>

                </div>
                <el-table
                    :data="tableHistoryList==null?tableHistoryList:tableHistoryList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%;overflow-x:auto;"
                    :default-sort = "{prop: 'date', order: 'descending'}">
                    <el-table-column>
                        <el-table-column
                            prop="illness_description"
                            label="病情描述"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="check_id"
                            label="检查项目编号"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="check_result"
                            label="检查结果"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="diagnosis_result"
                            label="诊断结果"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="date"
                            label="诊断日期"
                            sortable
                            :formatter="formatDate"
                            width="160">
                        </el-table-column>
                        <el-table-column
                            prop="prescription"
                            label="处方"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="dose"
                            label="剂量"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="medicine_expenses"
                            label="药费"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="sentry"
                            label="诊断情况"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作">
                            <!-- <template slot-scope="scope">
                                <el-button type="danger" size="small" style="margin-left: 0;"
                                    @click="dialog2=true">开药
                                </el-button> -->
                                <template slot-scope="scope">
                                    <!-- <el-button type="danger" plain icon="el-icon-document" @click="dialog2=true"
                                        style="float: left;">开设药方
                                    </el-button> -->
                                    <el-button type="danger" plain icon="el-icon-document" @click="updateHistory(scope.row)">开设药方
                                    </el-button>
                                </template>

                            <!-- </template> -->
                        </el-table-column>
                    </el-table-column>

                </el-table>
                <div class="pagination" style="margin-top:15px;margin-left:350px">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[3, 5, 10]"
                        :page-size="pagesize"
                        layout="prev, pager, next,jumper"
                        :total="tableHistoryList==null?0:tableHistoryList.length">
                    </el-pagination>
                </div>

                <el-dialog title="问诊中..." :visible.sync="dialog1">
                    <el-form :model="form">
                        <el-form-item label="病情描述：" :label-width="formLabelWidth">
                            <el-input v-model="form.illness_description" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="检查项目编号：" :label-width="formLabelWidth">
                            <el-input v-model="form.check_id" autocomplete="off"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item> -->
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialog1 = false">取 消</el-button>
                        <el-button type="primary" @click="saveHistory()">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="开药中..." :visible.sync="dialog2">
                    <el-form :model="form">
                        <el-form-item label="诊断结果：" :label-width="formLabelWidth">
                            <el-input v-model="form.diagnosis_result" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="处方：" :label-width="formLabelWidth">
                            <el-input v-model="form.prescription" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="剂量：" :label-width="formLabelWidth">
                            <el-input v-model="form.dose" autocomplete="off"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="诊断情况：" :label-width="formLabelWidth">
                            <el-input v-model="form.sentry" autocomplete="off"></el-input>
                        </el-form-item> -->
                        <el-form-item label="诊断情况：" :label-width="formLabelWidth">
                            <el-select v-model="form.sentry" placeholder="请选择">
                                <el-option label="未完成" value="未完成"></el-option>
                                <el-option label="进一步就诊" value="进一步就诊"></el-option>
                                <el-option label="完成" value="完成"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialog2 = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm()">确 定</el-button>
                    </div>
                </el-dialog>

            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import axios from 'axios'
export default {

    data() {
      return {
        labelPosition:"top",
        tableHistoryList:[],
        dialog1:false,
        dialog2:false,
        currentPage: 1,
        pagesize: 4,
        paccount:"",
        form: {
            id:'',
            paccount:'',
            daccount:'',
            illness_description:'',
            check_id:'',
            check_result:'',
            diagnosis_result:'',
            prescription:'',
            medicine_expenses:'',
            dose:'',
            date:'',
            sentry:''
        },
        formLabelWidth:'120px'
      }
    },
    mounted(){
        this.getHistory();
    },
    created(){
        this.getParams();
    },
    methods:{
        getParams() {
            this.paccount = this.$route.query.paccount;
            console.log("MyPatient的paccount="+this.paccount);
        },
        handleSizeChange(val) {
            this.pagesize=val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        formatDate(row, column) {
            // 获取单元格数据
            let data = row[column.property];
            if(data == null) {
                return null;
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        getHistory(){
            var that=this;
            axios.post("http://localhost:8848/history/findHistoryByPAccount",
            {
                paccount:that.$route.query.paccount,
            }).then(response=>{
                    console.log(response);
                    that.tableHistoryList=response.data.data;
            }).catch(function(){})
        },
        saveHistory(){
            if(this.form.illness_description=="" || this.form.check_id==""){
                this.$message({
                    message:"病人就诊信息不能为空",
                    type:"error",
                    duration:2000
                })
                return;
            }

            var that=this;
            axios.post("http://localhost:8848/history/saveHistory",{
                paccount:that.$route.query.paccount,
                illness_description:that.form.illness_description,
                check_id:that.form.check_id,
                date:that.form.date,
            })
                .then(function (response) {
                    console.log(response);

                    // that.dialog2=false;
                    // console.log(that.dialog2);
                })
            this.dialog1=false
            this.$router.push({
                path:"/3-3"
            })
        },
        updateHistory(row) {
            this.form=JSON.parse(JSON.stringify(row));
            this.dialog2 = true
        },
        submitForm(){
            // this.$store.commit("setStu1", val);
            // this.$notify({
            //     title: "修改成功！",
            //     type: "success",
            //     duration: 2000
            // })
            // this.dialogGrade = false

            axios.post("http://localhost:8848/history/updateHistory",this.form)
                .then(function (response) {
                    console.log(response);

                    // that.dialog2=false;
                    // console.log(that.dialog2);
                })
            this.dialog2=false
            this.$router.push({
                path:"/3-3"
            })
        },
    }
}
</script>

<style scoped>
.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 800px;
}
.el-main {
    background-color: white;
    color: #333;
    text-align: left;
    /* line-height: 800px; */
}
body > .el-container {
    margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
.el-select {
    padding: 0 0px;
    float: left;
    width: 50%;
}
h1{
    text-align: center;
}
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99CCCC;
}
.grid-content {
    border-radius: 4px;
    line-height: 40px;
    text-align: left;
    text-indent: 1em;
    font-family: 宋体;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.colme{
    background: linear-gradient(to bottom, #99CCCC, white);
    /* background-color:#99CCCC; */
    height:600px;
}
.el-select {
    padding: 0 0px;
    float: left;
    width: 100%;
}
</style>
